<template>
  <el-card class="user-page">
    <div class="header">
      <div class="search">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-input
              v-model="formInline.username"
              placeholder="根据用户名搜索"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="formInline.username = ''">清空</el-button>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="add">
        <el-button type="success" class="el-icon-edit" @click="add"
          >新增用户</el-button
        >
      </div>
    </div>
    <el-alert
      :title="`共${counts}条记录`"
      type="info"
      show-icon
      :closable="false"
    >
    </el-alert>
    <el-table
      :header-cell-style="{ background: '#FAFAFA' }"
      :data="userData"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" label="序号" width="80"> </el-table-column>
      <el-table-column prop="email" label="邮箱" width="180"> </el-table-column>
      <el-table-column prop="phone" label="联系电话"> </el-table-column>
      <el-table-column prop="username" label="用户名"> </el-table-column>
      <el-table-column prop="permission_group_title" label="权限组名称">
      </el-table-column>
      <el-table-column prop="role" label="角色"> </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            circle
            plain
            type="primary"
            icon="el-icon-edit"
            @click="edit(scope.row.id)"
            v-show="scope.row.id !== 2"
          ></el-button>
          <el-button
            circle
            plain
            type="danger"
            icon="el-icon-delete"
            @click="del(scope.row.id)"
            v-show="scope.row.id !== 2"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next,sizes,jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.page"
        :page-sizes="[10, 20, 30, 50]"
        :total="counts"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="50%"
      :close-on-click-modal="false"
    >
      <div v-if="isAdd">
        <el-form
          ref="formRef"
          :model="userForm"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="userForm.username"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="userForm.email"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="userForm.password"></el-input>
          </el-form-item>
          <el-form-item label="角色">
            <el-input v-model="userForm.role"></el-input>
          </el-form-item>
          <el-form-item label="权限组名称">
            <!-- <el-input v-model="userForm.permission_group_id"></el-input> -->
            <el-select
              v-model="userForm.permission_group_id"
              placeholder="请选择"
              filterable
              clearable
            >
              <el-option
                v-for="item in permissionOption"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model.number="userForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="介绍">
            <el-input
              type="textarea"
              v-model="userForm.introduction"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="isEdit">
        <el-form
          ref="formRef"
          :model="userForm"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="userForm.username"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="userForm.email"></el-input>
          </el-form-item>
          <el-form-item label="角色">
            <el-input v-model="userForm.role"></el-input>
          </el-form-item>
          <el-form-item label="权限组名称">
            <!-- <el-input v-model="userForm.permission_group_id"></el-input> -->
            <el-select
              v-model="userForm.permission_group_id"
              placeholder="请选择"
              filterable
              clearable
            >
              <el-option
                v-for="item in permissionOption"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model.number="userForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="介绍">
            <el-input
              type="textarea"
              v-model="userForm.introduction"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { list, add, detail, update, remove } from "@/api/base/users";
import { simple } from "@/api/base/permissions";
export default {
  data() {
    return {
      formInline: {
        username: "",
      },
      params: {
        page: 1,
        pagesize: 10,
        username: "",
      },
      userForm: {
        username: "",
        email: "",
        password: "",
        role: "",
        permission_group_id: "",
        phone: "",
        introduction: "",
      },
      userData: [],
      counts: null,

      dialogVisible: false,
      title: "",
      isAdd: false,
      isEdit: false,
      permissionOption: [],
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        email: [{ required: true, message: "邮箱不能为空", trigger: "blur" }],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.list();
    this.simple();
  },
  methods: {
    onSubmit() {
      this.params.username = this.formInline.username;

      this.list();
    },
    async list() {
      const { data } = await list(this.params);

      this.userData = data.list;
      this.counts = data.counts;
    },
    async simple() {
      const { data } = await simple();

      this.permissionOption = data;
    },
    handleSizeChange(val) {
      this.params.pagesize = val;
      this.list();
    },
    handleCurrentChange(current) {
      this.params.page = current;
      this.list();
    },
    add() {
      this.title = "创建用户";
      this.dialogVisible = true;
      this.isAdd = true;
      this.isEdit = false;
    },
    async edit(id) {
      this.title = "编辑用户";
      this.dialogVisible = true;
      this.isAdd = false;
      this.isEdit = true;
      const { data } = await detail(id);

      this.userForm.username = data.username;
      this.userForm.email = data.email;
      this.userForm.password = data.password;
      this.userForm.role = data.role;
      this.userForm.id = data.id;
      this.userForm.permission_group_id = data.permission_group_id;
      this.userForm.phone = data.phone;
      this.userForm.introduction = data.introduction;
    },
    async save() {
      try {
        if (this.title === "创建用户") {
          await this.$refs.formRef.validate();
          const res = await add(this.userForm);

          if (res.status === 200) {
            this.$message.success("添加成功");
          } else {
            this.$message.error("添加失败");
          }
        } else {
          const res = await update(this.userForm);
          if (res.status === 200) {
            this.$message.success("修改成功");
          } else {
            this.$message.error("修改失败");
          }
        }
        this.dialogVisible = false;
        this.list();
      } catch (err) {
        this.$message.error(err.response.data);
      }
    },
    async del(id) {
      await this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      await remove(id);
      this.$message({
        type: "success",
        message: "删除成功!",
      });
      this.list();
    },
  },
};
</script>

<style scoped lang="scss">
.user-page {
  margin: 20px 20px;
  .header {
    display: flex;
    justify-content: space-between;
  }
  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
  .el-dialog {
    .dialog-footer {
      display: block;
      text-align: center;
    }
  }
}
</style>
